import 'package:flutter/material.dart';
import 'package:gameplay_flutter/lib_runtime/extension/string_extension/string_text.dart';
import 'package:gameplay_flutter/lib_runtime/extension/widget/widget_wrapper.dart';
import 'package:get/get.dart';

import '../../../../lib_basemodel/chat_room/kh_chat_room_seat_model.dart';
import '../../../../lib_baseview/theme/jr.dart';

// 定义回调函数类型
typedef OnItemSelectedCallback = void Function(int index);

// ignore: must_be_immutable
class OnLineListWidget extends StatelessWidget {
  /// 上麦申请的数组
  // List<HbRtmMsg?>? applyMicList;
  /// 麦位列表
  List<KHChatRoomSeatModel?>? micList;

  /// 选中回调函数
  final OnItemSelectedCallback? onItemSelected;

  OnLineListWidget({super.key, this.micList, this.onItemSelected});

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Padding(
          padding: const EdgeInsets.only(bottom: 16),
          child: Column(
            children: [
              Container(
                height: 65,
                width: double.infinity,
                color: Colors.transparent,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Stack(
                      alignment: AlignmentDirectional.center,
                      children: [
                        const SizedBox(width: 40, height: 40),
                        JR.img(
                          'room/room_manager_cloase.png',
                          width: 20,
                          height: 20,
                        ),
                      ],
                    ).onTap(() {
                      Navigator.pop(context);
                    }),
                    'application list'.text(
                        color: const Color(0xFF1B1B1B),
                        fontSize: 20,
                        weight: TextFontWeight.medium),
                    const SizedBox(height: 40, width: 40),
                  ],
                ).paddingSymmetric(horizontal: 7),
              ),
              Container(
                height: 0.5,
                width: double.infinity,
                color: const Color(0xFFD8D8D8),
              ),
              Expanded(
                child: ListView.separated(
                  itemCount: micList?.length ?? 0,
                  itemBuilder: (context, index) {
                    // HbRtmMsg msg = applyMicList![index];

                    return Container(
                      width: double.infinity,
                      height: 40,
                      color: Colors.amberAccent,
                    );
                    // HbRtmMsg? msg = applyMicList?[index];

                    // return Container(
                    //   padding: const EdgeInsetsDirectional.all(12),
                    //   decoration: BoxDecoration(
                    //     borderRadius: BorderRadius.circular(8),
                    //   ),
                    //   child: Row(
                    //     children: [
                    //       const SizedBox(width: 23),
                    //       Text(
                    //         '${index + 1}',
                    //         style: const TextStyle(
                    //           color: Color(0xFFA8A8A8),
                    //           fontSize: 16,
                    //           fontWeight: FontWeight.w500,
                    //         ),
                    //       ),
                    //       const SizedBox(width: 9),
                    //       msg?.msg?.headPortraitsUrl != null
                    //           ? JR
                    //               .img(msg!.msg!.headPortraitsUrl!,
                    //                   width: 40,
                    //                   height: 40,
                    //                   fit: BoxFit.contain)
                    //               .corner(radius: 40 / 2.0)
                    //           : const SizedBox(
                    //               width: 40,
                    //               height: 40,
                    //             ),
                    //       const SizedBox(width: 9),
                    //       JR.img('room/room_mic_blue_icon.png',
                    //           width: 16, height: 18, fit: BoxFit.contain),
                    //       const SizedBox(width: 12),
                    //       (msg?.msg?.nickName ?? '')
                    //           .text(color: Color(0xFF000000), fontSize: 16),
                    //       const Spacer(),
                    //       JR
                    //           .img('room/room_manager_mic_up.png',
                    //               width: 36, height: 35, fit: BoxFit.contain)
                    //           .onTap(() {
                    //         // 调用回调函数
                    //         onItemSelected?.call(index);
                    //         Navigator.pop(context);
                    //       }),
                    //       const SizedBox(width: 25),
                    //     ],
                    //   ),
                    // );
                  },
                  separatorBuilder: (context, index) {
                    // 最后一个元素之后不加分隔线
                    if (index < (micList?.length ?? 0) - 1) {
                      return Container(
                        height: 0.5,
                        width: double.infinity,
                        color: Color(0xFFD8D8D8),
                      );
                    } else {
                      return const SizedBox.shrink();
                    }
                  },
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}



/*
class OnLineListWidget extends StatelessWidget {
  /// 麦位列表
  List<KHChatRoomSeatModel?>? micList;

  OnLineListWidget({super.key, this.micList});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 576,
      decoration: BoxDecoration(
          border: Border.all(
        width: 1,
        color: Colors.amber,
      )),
      width: double.infinity,
      child: Stack(
        children: [
          Padding(
            padding: const EdgeInsets.only(bottom: 16),
            child: Column(
              children: [
                Container(
                  height: 65,
                  width: double.infinity,
                  color: Colors.transparent,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children: [
                      Stack(
                        alignment: AlignmentDirectional.center,
                        children: [
                          const SizedBox(width: 40, height: 40),
                          JR.img(
                            'room/room_manager_cloase.png',
                            width: 20,
                            height: 20,
                          ),
                        ],
                      ).onTap(() {
                        Navigator.pop(context);
                      }),
                      'Online(${micList?.length ?? 0})'.text(
                          color: const Color(0xFF1B1B1B),
                          fontSize: 20,
                          weight: TextFontWeight.medium),
                      const SizedBox(height: 40, width: 40),
                    ],
                  ).paddingSymmetric(horizontal: 7),
                ),
                Container(
                  height: 0.5,
                  width: double.infinity,
                  color: const Color(0xFFD8D8D8),
                ),
                Expanded(
                  child: ListView.separated(
                    itemCount: micList?.length ?? 0,
                    itemBuilder: (context, index) {
                      // HbRtmMsg msg = applyMicList![index];
                      return Container(
                        width: 40,
                        height: 40,
                        color: Colors.green,
                      );
/*
                      HbRtmMsg? msg = applyMicList?[index];

                      return Container(
                        padding: const EdgeInsetsDirectional.all(12),
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(8),
                        ),
                        child: Row(
                          children: [
                            const SizedBox(width: 23),
                            Text(
                              '${index + 1}',
                              style: const TextStyle(
                                color: Color(0xFFA8A8A8),
                                fontSize: 16,
                                fontWeight: FontWeight.w500,
                              ),
                            ),
                            const SizedBox(width: 9),
                            msg?.msg?.headPortraitsUrl != null
                                ? JR
                                    .img(msg!.msg!.headPortraitsUrl!,
                                        width: 40,
                                        height: 40,
                                        fit: BoxFit.contain)
                                    .corner(radius: 40 / 2.0)
                                : const SizedBox(
                                    width: 40,
                                    height: 40,
                                  ),
                            const SizedBox(width: 9),
                            JR.img('room/room_mic_blue_icon.png',
                                width: 16, height: 18, fit: BoxFit.contain),
                            const SizedBox(width: 12),
                            (msg?.msg?.nickName ?? '')
                                .text(color: Color(0xFF000000), fontSize: 16),
                            const Spacer(),
                            JR
                                .img('room/room_manager_mic_up.png',
                                    width: 36, height: 35, fit: BoxFit.contain)
                                .onTap(() {
                              // 调用回调函数
                              // onItemSelected?.call(index);
                              Navigator.pop(context);
                            }),
                            const SizedBox(width: 25),
                          ],
                        ),
                      );
                    
                    */
                    },
                    separatorBuilder: (context, index) {
                      // 最后一个元素之后不加分隔线
                      if (index < (micList?.length ?? 0) - 1) {
                        return Container(
                          height: 0.5,
                          width: double.infinity,
                          color: const Color(0xFFD8D8D8),
                        );
                      } else {
                        return const SizedBox.shrink();
                      }
                    },
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
      // color: Colors.red,
    );
  }
}

*/